.web-preview {
	position: fixed;
		top: 0;
		right: 0;
		left: 0;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	z-index: z-index( 'root', '.web-preview' ); // Above TinyMCE dialogs
	transition: opacity 0.3s ease-in-out;

	&.is-visible {
		opacity: 1;
		bottom: 0;
		visibility: visible;

		.web-preview__content {
			opacity: 1;
			transform: translateY( 0 ) scale( 1 );
		}
	}

	&.is-with-sidebar {
		@include breakpoint( ">660px" ) {
			left: 273px;
		}
	}
}

.web-preview__backdrop {
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	display: block;
}

.web-preview__content {
	box-shadow: 0 0 0 1px rgba( $gray, 0.5 );
	background: $gray-light;
	border-radius: 4px 4px 0 0;
	position: absolute;
		top: 24px;
		left: 0;
		right: 0;
		bottom: 0;
	margin: 0 auto;
	opacity: 0;
	transform: translateY( 80vh );
	transition: transform 0.2s ease-out,
		opacity 0.1s ease-in-out,
		max-width 0.2s ease-out;
	width: 100%;

	.is-computer & {
		max-width: 1200px;
		@include breakpoint( ">960px" ) {
			left: 24px;
			right: 24px;
		}
	}

	.is-tablet & {
		max-width: 783px;
	}

	.is-phone & {
		max-width: 460px;
	}

	.is-seo & {
		max-width: 865px;
	}
}

.web-preview.is-computer .web-preview__content,
.web-preview.is-tablet .web-preview__content,
.web-preview.is-phone .web-preview__content {
	@include breakpoint( "<960px" ) {
		top: 0;
		width: 100%;
		border-radius: 0;
	}
}

.web-preview__toolbar {
	height: 48px;
	background: $white;
	border-bottom: 1px solid lighten( $gray, 20% );
	border-radius: 4px 4px 0 0;
	display: flex;
}

.web-preview__close,
.web-preview__external,
.web-preview__device-button,
.web-preview__seo-button {
	color: $gray;
	border-right: 1px solid lighten( $gray, 20% );
	padding: 12px 16px;

	cursor: pointer;

	&:hover {
		color: $gray-dark;
	}

	.gridicon {
		vertical-align: middle;
	}
}

.web-preview__close {
	height: 49px;
	cursor: pointer;
}

.web-preview__external {
	display: flex;
	align-items: center;
}

.web-preview__device-switcher {
	display: flex;
	margin-left: 8px;
}

.web-preview__device-button {
	border-right: none;
	padding-left: 8px;
	padding-right: 8px;

	&.is-active {
		color: $gray-dark;
	}

	@include breakpoint( "<660px" ) {
		display: none;
	}
}

.web-preview__seo-button {
	border-right: none;
	padding: 0 14px;
	height: 100%;

	&.is-active {
		color: $gray-dark;
	}

	&.is-showing-device-switcher {
		border-left: 1px solid lighten( $gray, 20% );
		margin-left: 8px;
	}
}

.web-preview__seo-label {
	margin-left: 6px;
	vertical-align: middle;
}

.web-preview__back-to-preview-button {
	display: none;

	@include breakpoint( "<660px" ) {
		display: block;
	}
}

.web-preview__toolbar-tray {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;

	.button {
		margin: 4px;
		&:not(:last-child) {
			@include breakpoint( "<660px" ) {
				display: none;
			}
		}
	}
}

.web-preview__frame {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;

	.is-loaded & {
		opacity: 1;
	}
}

.web-preview__placeholder {
	width: 100%;
	position: absolute;
		top: 49px;
		bottom: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.web-preview .spinner {
	margin-left: -10px;
	position: absolute;
		top: 45%;
		left: 50%;
}

.web-preview .pulsing-dot {
	right: 24px;
	top: 22px;
	left: initial;
}

.web-preview__loading-message {
	color: $gray;
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	display: block;
	margin: 48px 0;
}
